<html>
<head>
<script src='../jquery/_jqimp.php'></script>
<script src="./doT.min.js" type="text/javascript"></script>
<script id="headertmpl" type="text/x-dot-template">
	<h3>{{=it.title}}</h3>
</script>
<script id="pagetmpl" type="text/x-dot-template">
	<h4>Here is the page using a header template</h4>
	{{#def.header}}
	{{=it.name}}
</script>
<script id="customizableheadertmpl" type="text/x-dot-template">
	 {{#def.header}}
	 {{#def.mycustominjectionintoheader || ''}}
</script>
<script id="pagetmplwithcustomizableheader" type="text/x-dot-template">
	<h4>Here is the page with customized header template</h4>
	{{##def.mycustominjectionintoheader:
		<div>{{=it.title}} is not {{=it.name}}</div>
	#}}
	{{#def.customheader}}
	{{=it.name}}
</script>
<style type="text/css">
div{ padding:10px; margin:10px; border:1px solid #CCC; }
p{ padding:1px; margin:1px; }
</style>
</head>

<body>

<div id="demo1">
<script id="demo1tpl" type="text/x-dot-template">
    <p>Hi {{=it.name}}!</p>
    <p>{{=it.age || ''}}</p>
</script>
</div>
<script>
var dataInter = {"name":"Jake","age":31};
var interText = doT.template($("#demo1tpl").text());
$("#demo1").html(interText(dataInter));
</script>

<div id="demo2">
<script id="demo2tpl" type="text/x-dot-template">
    {{ for(var prop in it) { }}
        <p>{{= prop }} : {{= it[prop] }}</p>
    {{ } }}
</script>
</div>
<script>
var dataEval = {"name":"Jake","age":31,"interests":["basketball","hockey","photography"],"contact":{"email":"jake@xyz.com","phone":"999999999"}};
var evalText = doT.template($("#demo2tpl").text());
$("#demo2").html(evalText(dataEval));
</script>

<div id="demo3"></div>
<script id="demo3tpl" type="text/x-dot-template">
    {{~it.array:value:index}}
        <p>{{= index+1 }}{{= value }}!</p>
    {{~}}
</script>
<script>
var dataArr = {"array":["banana","apple","orange"]};
var arrText = doT.template($("#demo3tpl").text());
$("#demo3").html(arrText(dataArr));
</script>

<div id="demo4"></div>
<script id="demo4tmpl" type="text/x-dot-template">
    {{? !it.name }}
    <p>Oh, I love your name, {{=it.name}}!</p>
    {{?? !it.age === 0}}
    <p>Guess nobody named you yet!</p>
    {{??}}
    You are {{=it.age}} and still dont have a name?
    {{?}}
</script>
<script>
var dataEncode = {"uri":"http://jq22.com/?keywords=Yoga","html":"<div style='background: #f00; height: 30px; line-height: 30px;'>html元素</div>"};
var EncodeText = doT.template($("#demo4tmpl").text());
$("#demo4").html(EncodeText(dataEncode));
</script>

<div id="demo5"></div>
<script id="demo5tmpl" type="text/x-dot-template">
    Visit {{!it.uri}} {{!it.html}}
</script>
<script>
var dataEncode = {"uri":"http://jq22.com/?keywords=Yoga","html":"<div style='background: #f00; height: 30px; line-height: 30px;'>html元素</div>"};
var EncodeText = doT.template($("#demo5tmpl").text());
$("#demo5").html(EncodeText(dataEncode));
</script>

<div id="demo6"></div>
<script id="demo6tmpl" type="text/x-dot-template">
    {{##def.snippet:
    <div>{{=it.name}}</div>{{#def.joke}}
    #}}
    {{#def.snippet}}
    {{=it.html}}
</script>
<script>
var dataPart = {"name":"Jake","age":31,"html":"<div style='background: #f00; height: 30px; line-height: 30px;'>html元素</div>"};
var defPart = {"joke":"<div>{{=it.name}} who?</div>"};
var partText = doT.template($("#demo6tmpl").text(), undefined, defPart);
$("#demo6").html(partText(dataPart));
</script>

<div id="demo7"></div>
<script>
</script>

<div id="content"></div>
<div id="contentcustom"></div>
<p>Demo from : http://www.jq22.com/jquery-info8648</p>
</body>
<script type="text/javascript">
var def = {
	header: document.getElementById('headertmpl').text,
	customheader: document.getElementById('customizableheadertmpl').text
};
var data = {
	title: "My title(农民工)",
	name: "My name(Peace)"
};

var pagefn = doT.template(document.getElementById('pagetmpl').text, undefined, def);
document.getElementById('content').innerHTML = pagefn(data);

pagefn = doT.template(document.getElementById('pagetmplwithcustomizableheader').text, undefined, def);
document.getElementById('contentcustom').innerHTML = pagefn(data);
</script>
</html>
